<template>
	<view class="container">		
		<view class="box-bg">
			<uni-nav-bar :border="false" :statusBar="true" title="红杉树美家">
				<block slot="left">
					<view class="city uni-flex justify-space-between w-40n" @click="goPage('city','')">
						<view class="fs12 text-gray3 fw500">{{ city.title }}</view>
						<uni-icons type="arrowdown" color="#666" size="14" />
					</view>
				</block>
			</uni-nav-bar>
		</view>
		<view class="indexContent">
			<view class="ad_image" v-if="bannerTop && bannerTop.list.length > 0">
				<cc-swiper :info="bannerTop"><!--广告位--></cc-swiper>
			</view>
			
			<!-- 装修报价 -->
			<view class="house_price bg-white m-t30">
				<view class="house_price_title fs15 fw600">装修报价<text class="fs11 text-gray9 m-l20 fwn">根据房屋信息 3秒给出精准报价</text></view>
				<view class="house_price_old_new uni-flex justify-space-between m-b20">
					<view :class="'house_price_item '+(houseInfo.old_new == 'new' ? 'house_price_active' : '')" @click="houseInfo.old_new = 'new'">新房</view>
					<view :class="'house_price_item '+(houseInfo.old_new == 'old' ? 'house_price_active' : '')" @click="houseInfo.old_new = 'old'">老房</view>
				</view>
				<view class="uni-flex justify-space-between fs12">
					<view class="house_price_item1 house_other uni-flex justify-space-between" @click="clickShop">
						<view>{{ houseInfo.city_name }}体验店</view>
						<uni-icons type="arrowdown" color="#666" size="14" />
					</view>
					<view class="house_price_item1 house_price_area uni-flex justify-space-between">
						<input v-model="houseInfo.area" class="uni-input" type="number" placeholder="房屋面积" maxlength="3" />
						<view>㎡</view>
					</view>
					<view class="house_price_item1 house_price_btn" @click="getPrice">
						获取报价
					</view>
				</view>
			</view>
			
      <!--首页中部广告位-->
			<view class="overflow_h m-30 round-20" v-if="bannerCenter && bannerCenter.list.length > 0">
				<cc-swiper :info="bannerCenter"></cc-swiper>
			</view>
      
      <!--首页整装广告位-->
   
      
      <!--首页体验馆广告位-->
      <view class="overflow_h m-30 round-20" v-if="bannerExperienceHall && bannerExperienceHall.list.length > 0">
      	<cc-swiper :info="bannerExperienceHall"><!--广告位--></cc-swiper>
      </view>
	  <!--首页产品广告位-->
			
			<!--标签栏-->
			<view class="bg-white p-l30 p-r30">
				<zb-tab v-model="currentLabel" :data="labelList" :shrink="true" lineColor="#007AFF" @input="labelTabResult"></zb-tab>
			</view>
			
			<!-- 案例 -->
			<view class="case_list bg-white p-30">
				<view class="case_item" v-for="item in list" @click="goPage('case',item.id)">
					<view class="case_image round-10 overflow_h bg-grayf5" :style="'height:'+(parseInt(item.image_h / (item.image_w / 165)) )+'px;'">
						<image class="case_img round-10 " :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="case_title fs12 text-gray6"> {{ item.title }} </view>
					<view class="case_style fs10 text-gray9 uni-flex justify-space-between"> 
						<view>{{ item.style.title }} · {{ item.area }}㎡</view>
						<view>{{ item.city.title }}</view>
					</view>
					<view class="case_labels uni-flex justify-left">
						<view class="case_label m-r10 fs10" v-for="(ll,kk) in item.labels" v-if="kk < 3">{{ ll.title }}</view>
					</view>
				</view>
			</view>
			
			<common-footer></common-footer>
		</view>
		<!--装修报价：选择城市-->
		<uni-data-picker ref="shopPicker" popup-title="体验店" :localdata="cityList" v-model="houseInfo.city_code" @change="changeShop">
		</uni-data-picker>
		
		<!-- 提示 -->
		<prompt :content="prompt" :show="prompt.show" @confirm="prompt.show = false"></prompt>
	</view>
</template>
<script>
import { getAd, getLabel, getAddressByLocation } from "@/api/base.js"
import { cityList, housePrice, caseList } from "@/api/house.js"

import { getServiceList } from "@/api/project.js"
let that;
export default {
	data() {
		return {
			city: "",
			list: [],		//签约工地列表
			pages: {
				page: 1,
				size: 10,
				loading: true
			},
			stateList: ['待开工','在建','在建','已完工','已停工'],
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
			bannerTop: {
				list: [],
				imgWidth: "100%",
				imgHeight: "180px",
				field: "title"				
			},
			bannerCenter: {
				list: [],
				imgWidth: "100%",
				imgHeight: "100px",
				field: "title"				
			},
      bannerAllPackage: {
      	list: [],
      	imgWidth: "100%",
      	imgHeight: "200rpx",			
      },
      bannerExperienceHall: {
      	list: [],
      	imgWidth: "100%",
      	imgHeight: "200px",
      	field: "title"				
      },
	  bannerProtaocan: {
      	list: [],
      	imgWidth: "100px",
      	imgHeight: "100px",
      	field: "title"				
      },
	  bannerProrz: {
      	list: [],
      	imgWidth: "100px",
      	imgHeight: "100px",
      	field: "title"				
      },
	  bannerProdz: {
      	list: [],
      	imgWidth: "100px",
      	imgHeight: "100px",
      	field: "title"				
      },
	  bannerProyz: {
      	list: [],
      	imgWidth: "100px",
      	imgHeight: "100px",
      	field: "title"				
      },
			houseInfo: {
				old_new: 'new',
				city_code: '',
				city_name: '',
				area: ''
			},
			cityOrgList: [],
			cityList: [],	//城市
			labelList: [],	//标签
			currentLabel: 0,	//当前标签
			
			prompt: {	//提示
				show: false,
				title: "",
				content: "",
				button: ""
			}
		}
	},
	onLoad(){
		that = this
		that.getAdList()
		that.getCityList()
	},
	onReachBottom(e){
		this.pages.page++
		this.getLabelList()
	},
	onShow() {
		uni.$on("refresh", (data) => { 
			that.city = data
			that.pages.page = 1
			that.pages.loading = true
			that.getCaseList()
		})
	},
	onUnload() {
		uni.$off("refresh")		//需要手动解绑事件
	},
	methods: {
		/**
		 * 获取位置
		 */
		getLocation() {
			getAddressByLocation().then(res => {
				if(res) {
					let city = that.cityOrgList.find(e => e.title == res.city)
					that.city = city && city!=undefined ? city : that.cityOrgList[0]
				}
			})
		},
		/**
		 * 体验店
		 */
		changeShop(e) {
			let value = e.detail.value
			that.$set(that.houseInfo, "city_name",  value[0]['text'] || '')
		},
		/**
		 * 选择体验店
		 */
		clickShop() {			
			that.$refs.shopPicker.show()
		},
		/**
		 * 获取报价
		 */
		getPrice(){			
			let token = uni.getStorageSync("token")
			if(!token) {			
				uni.redirectTo({
					url: "/pages/user/login"
				})
				return
			}
			if(that.houseInfo.area == '' || parseInt(that.houseInfo.area) <= 0) {
				uni.showToast({ title: "请输入房屋面积", icon: 'none' });				
				return
			}
			housePrice(that.houseInfo).then(res => {				
				that.prompt = {
					title: "您的装修报价为：",
					content: `￥${res.data}`,
					button: '我知道了',
					show: true
				}
			})
		},
		/**
		 * 城市
		 */
		getCityList() {
			cityList({
				order: "sort asc",
				condition: {
					state: 1
				}				
			}).then(res => {
				that.cityOrgList = res.data
				if(that.city == "") {
					that.city = that.cityOrgList[0]
				}
				that.houseInfo.city_code = res.data[0]['code']
				that.houseInfo.city_name = res.data[0]['title']
				res.data.forEach((item) => {
					that.cityList.push({
						text: item.title,
						value: item.code,
					})
				})		
								
				that.getLabelList()
			})
		},
		/**
		 * 广告
		 */
		getAdList(){
			getAd({
				order: "sort asc",
				condition: {
					state: 1,
					position_code: "homeTopBanner",
				}				
			}).then(res => {
				that.bannerTop.list = res.data
			})
			getAd({
				order: "sort asc",
				condition: {
					state: 1,
					position_code: "homeCenterBanner",
				}				
			}).then(res => {
				that.bannerCenter.list = res.data
			})
      getAd({
      	order: "sort asc",
      	condition: {
      		state: 1,
      		position_code: "homeVRBanner",
      	}				
      }).then(res => {
      	that.bannerAllPackage.list = res.data
      })
      getAd({
      	order: "sort asc",
      	condition: {
      		state: 1,
      		position_code: "homeProduBanner",
      	}				
      }).then(res => {
      	that.bannerExperienceHall.list = res.data
      })
	  getAd({
      	order: "sort asc",
      	condition: {
      		state: 1,
      		position_code: "homeProtaocanBanner",
      	}				
      }).then(res => {
      	that.bannerProtaocan.list = res.data
      })
	  getAd({
      	order: "sort asc",
      	condition: {
      		state: 1,
      		position_code: "homeProdzBanner",
      	}				
      }).then(res => {
      	that.bannerProdz.list = res.data
      })
	  getAd({
      	order: "sort asc",
      	condition: {
      		state: 1,
      		position_code: "homeProrzBanner",
      	}				
      }).then(res => {
      	that.bannerProrz.list = res.data
      })
	  getAd({
      	order: "sort asc",
      	condition: {
      		state: 1,
      		position_code: "homeProyzBanner",
      	}				
      }).then(res => {
      	that.bannerProyz.list = res.data
      })
		},
		/**
		 * 获取标签
		 */
		getLabelList(){
			getLabel({
				order: "is_recommend asc, sort asc",
				condition: {
					state: 1,
					is_home_tab: 1,
					type: 'case'
				}				
			}).then(res => {				
				that.currentLabel = res.data[0]['code']
				res.data.forEach(item => {
					that.labelList.push({
						name: item.title,
						value: item.code
					})
				})
				
				that.getCaseList()				
			})
		},
		/**
		 * 标签点击回调
		 */
		labelTabResult(value) {
			that.currentLabel = value
			that.pages.page = 1
			that.pages.loading = true
			that.getCaseList()
		},
		getCaseList(){		
			if(!that.pages.loading) return
			that.pages.loading = false
			let params = {
				page: that.pages.page,
				size: that.pages.size,
				order: "sort asc",
				condition: {
					state: 1,
					label_codes: that.currentLabel,
					city_code: that.city.code
				}
			};
			caseList(params).then((res)=>{
				that.pages.loading = true
				let data = res.data
				let list = [];
				if(that.pages.page == 1) list = data.list;
				else list = [...that.list, ...data.list];
				that.list = list
			})
		},
		/**
		 * 查看大图
		 */
		viewImage(imgs,index){
			uni.previewImage({
				current: index,
				urls: imgs
			})
		},
		/**
		 * 案例详情
		 */
		goPage(type, id) {
			if(type == 'case') {
				uni.navigateTo({
					url: `/pages/case/detail?id=${id}`
				})
			}else {
				uni.navigateTo({
					url: `/pages/index/city?code=${that.city.code}`
				})				
			}
		}
	}
}
</script>
<style>
.hidden {
  display: none;
}
.indexContent {
	position: relative;
	top: var(--status-bar-height);
	margin-top: 66px;
}
.uni-data-tree-input {
	display: none;
}
.proContent	{
	display: flex;
	flex-direction: row;
}
</style>